<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实用技巧一，透明边框，虚线边框，蚂蚁线边框</title>
</head>
<body>
1、背景图片
<div id="div1">
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
	<div class="div6"></div>
</div>
<style>
	#div1 div {
		float: left;
		width: 200px;
		height: 200px;
		margin-right: 10px;
		margin-bottom: 10px;
		border: 5px dashed #000;
		padding: 10px;
		background: #eee url(../fd.png) no-repeat;
		box-sizing: border-box;
	}
	#div1 .div1 {
		background-origin:border-box;
	}
	#div1 .div2 {
		background-origin:content-box;
	}
	#div1 .div3 {
		background-origin:padding-box;
	}
	#div1 .div4 {
		clear: left;
		background-clip:border-box;
	}
	#div1 .div5 {
		background-clip:content-box;
	}
	#div1 .div6 {
		background-clip:padding-box;
	}
	#div1:after {
		content: '';
		display: table;
		clear: both;
	}

</style>
投影：
box-shadow: X坐标/ Y坐标/ 模糊/ 扩展/ 颜色/ 内阴影
背景初始位置：
background-origin:border-box content-box padding-box(默认);
背景裁剪：
background-clip:border-box(默认) content-box padding-box;

<br><br><br><br><br>

2、条纹效果 -> 线性渐变

<div id="div3"></div>
<style>
	#div3{
		width: 200px;
		height: 200px;
		background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
		background-size:42px 42px;
	}
</style>
<br><br><br><br><br>

3、条纹效果 -> 线性渐变

<div id="div4"></div>
<style>
	#div4{
		width: 200px;
		height:200px;

		background:repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
	}
</style>
<br><br><br><br><br>



4、条纹效果 -> 同色系

<div id="div5"></div>
<style>
	#div5{
		width: 200px;
		height:200px;

		background:#58a;
		background-image:repeating-linear-gradient(30deg,
		hsla(0,0%,100%,.1),
		hsla(0,0%,100%,.1) 15px,
		transparent 0,
		transparent 30px);
	}
</style>
<br><br><br><br><br>



5、条纹效果 -> 交错斜纹

<div id="div6"></div>
<style>
	#div6{
		width: 200px;
		height:200px;

		background:#58a;
		background-image:repeating-linear-gradient(45deg,
		hsla(0,0%,100%,.1),
		hsla(0,0%,100%,.1) 15px,
		transparent 0,
		transparent 30px),
		repeating-linear-gradient(-45deg,
				hsla(0,0%,100%,.1),
				hsla(0,0%,100%,.1) 15px,
				transparent 0,
				transparent 30px);
	}
</style>
<br><br><br><br><br>



6、条纹效果 -> 辅助线

<div id="div7"></div>
<style>
	#div7{
		width: 200px;
		height:200px;

		background:#58a;
		background-image:
				linear-gradient(#aaa 1px,transparent 0),
				linear-gradient(90deg,#aaa 1px,transparent 0);
		background-size:30px 30px;
	}
</style>
<br><br><br><br><br>



7、条纹效果 -> 辅助线

<div id="div8"></div>
<style>
	#div8{
		width: 200px;
		height:200px;

		background:#58a;
		background-image:
				linear-gradient(white 1px,transparent 0),
				linear-gradient(90deg,white 1px,transparent 0),
				linear-gradient(hsla(0,0%,100%,.3)1px,
				transparent 0),
				linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,
				transparent 0);
		background-size: 75px 75px,75px 75px,
		15px 15px,15px 15px;
	}
</style>
<br><br><br><br><br>




8、条纹效果 -> 点阵图

<div id="div9"></div>
<style>
	#div9{
		width: 200px;
		height:200px;

		background:#58a;
		background-image:
				linear-gradient(#58a 14px,transparent 0),
				linear-gradient(90deg,white 1px,transparent 0);
		background-size:15px 15px,15px 15px;
	}
</style>
<br><br><br><br><br>




9、条纹效果 -> 圆点

<div id="div10"></div>
<style>
	#div10{
		width: 200px;
		height:200px;

		background: #655;
		background-image:
				radial-gradient(tan 30%, transparent 0),
				radial-gradient(tan 30%, transparent 0);
		background-size: 30px 30px;
		background-position:0 0 ,15px 15px;
	}
</style>
<br><br><br><br><br>



10、条纹效果 -> 棋盘

<div id="div11"></div>
<style>
	#div11{
		width: 210px;
		height:210px;

		background: #888;
		background-image:
				linear-gradient(hsla(0, 0%, 80%, 1) 50%, transparent 0),
				linear-gradient(90deg,hsla(0, 0%, 80%, 1) 50%, transparent 0);
		background-size: 20px 20px;
		background-position:0 0 ,0 0;
	}
</style>
<br><br><br><br><br>




11、条纹效果 -> 点阵图

<div id="div12"></div>
<style>
	#div12{
		width: 210px;
		height: 210px;
		background: #eee;
		background-image:
				linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
				linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
		background-position:0 0,15px 15px;
		background-size: 30px 30px
	}
</style>
<br/><br/><br/><br/><br/>


12、条纹效果 -> 随机纹理

<div id="div13"></div>
<style>
	#div13 {
		width: 200px;
		height: 200px;

		background: #F0E2DB;
		background-image:
				linear-gradient(90deg, #fb3 2px, transparent 0),
				linear-gradient(90deg, #fb3 11px, transparent 0),
				linear-gradient(90deg, #ab4 23px,transparent 0),
				linear-gradient(90deg, #655 41px, transparent 0);
		background-size: 23px 100%, 41px 100%, 61px 100%, 83px 100%;
	}
</style>
<br/><br/><br/><br/><br/>




13、条纹效果 -> 随机纹理

<div id="div14"></div>
<style>
	#div14{
		width: 210px;
		height:210px;
		background:hsl(20,40%,90%);
		background-image:
				linear-gradient(90deg, #fb3 2px, transparent 0),
				linear-gradient(90deg, #fb3 11px, transparent 0),
				linear-gradient(90deg, #ab4 23px, transparent 0),
				linear-gradient(90deg, #655 41px, transparent 0);
		background-size:23px 100%,41px 100%,61px 100%,83px 100%;
	}
</style>
<br/><br/><br/><br/><br/>



</body>
</html>